<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" dir="ltr">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.w3schools.cn/cdnjs/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>旅游景点详细信息</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        #container {
            max-width: 800px;
            margin: 20px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #007BFF;
        }

        section {
            margin-bottom: 20px;
        }

        h2 {
            color: #007BFF;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            margin-bottom: 10px;
        }


        .circleImg {
            border-radius: 30px;
            width: 60px;
            height: 60px;
        }

        .commentImg {
            width: 300px;
            height: 150px;
        }

        .comment {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
        }

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            display: inline-block;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .info {
            flex-grow: 1;
            display: inline-block;
        }

        .username {
            font-weight: bold;
        }

        .membership {
            color: #666;
        }

        .content {
            display: flex;
            flex-direction: column;
        }

        .text-content,
        .image-content {
            width: 100%; /* 宽度占满父容器 */
            display: flex;
        }

        .text-content {
            /* 可以根据需要调整样式，控制文字从左到右排列 */
        }

        .image-content img {
            max-width: 100%;
            height: auto;
        }

        .content img {
            max-width: 100%;
            height: auto;
            margin-top: 10px;
        }

        .time {
            color: #888;
            font-size: 0.8em;
            margin-top: 10px;
        }

        .attraction-image {
            width: 500px;
            height: 300px;
        }

        /* 使用 flex 布局使 h1 和 p 元素水平排列 */
        .header-container {
            display: flex;
            align-items: center; /* 垂直居中 */
        }


        h1, p {
            margin-right: 20px; /* 为了增加它们之间的间距 */
        }

        /* 样式用于遮罩 */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            align-items: center;
            justify-content: center;
        }

        /* 样式用于弹窗 */
        .popup {
            background-color: #fff;
            padding: 40px;
            border-radius: 10px;
            text-align: center;
            width: 600px; /* 设置宽度 */
            height: 400px; /* 设置高度 */
        }

        /* 样式用于关闭按钮 */
        .close-btn {
            cursor: pointer;
            color: #333;
            font-weight: bold;
            margin-top: 10px;
            display: inline-block;
        }

        .fa-star {
            cursor: pointer;
        }

        .checked {
            color: orange;
        }

        /* 顶部导航栏样式 */
        nav {
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 99;
            text-align: center; /* 居中显示 */
            display: flex;
            align-items: center;
            padding: 5px 20px;
        }

        nav img {
            height: 30px;
        }

        nav a {
            display: inline-block;
            color: #555;
            text-align: center;
            padding: 10px 60px; /* 调整导航栏每个元素的大小 */
            text-decoration: none;
        }

        nav a:hover {
            color: #000;
            background-color: #f5f5f5;
        }

        nav a.active {
            color: #4caf50;
            background-color: #fff;
        }

        .dropdown {
            position: relative;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            top: 100%;
            width: 150px;
            background-color: #f9f9f9;
            padding: 10px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 6px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown:hover .dropdown-content,
        .dropdown-content:hover {
            display: block;
        }
        /* 顶部导航栏样式 */
    </style>
</head>
<body>

<!-- 顶部导航栏 -->
<nav>
    <!-- logo -->
    <div class="dropdown">
        <a href="http://sight.travel.com/">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/logo.jpg" alt="Logo">
        </a>
    </div>
    <div class="dropdown">
        <a href="http://sight.travel.com/theme" target="_blank">主题精选</a>
    </div>
    <div class="dropdown">
        <a href="#">联系我们</a>
    </div>
    <div class="dropdown">
        <a href="http://member.travel.com/sign" target="_blank">签到</a>
    </div>
    <div class="dropdown">
        <a href="#">我的</a>
        <div class="dropdown-content">
            <a href="#" target="_blank">我的账号</a>
            <a href="http://member.travel.com/memberOrder.html" target="_blank">我的订单</a>
            <a href="#" target="_blank">我的地址</a>
        </div>
    </div>
    <a th:if="${loginUser != null}">欢迎, [[${loginUser.username}]]</a>
    <a th:if="${loginUser == null}" href="http://auth.travel.com/login.html">你好，请登录</a>
    <a th:if="${loginUser == null}" href="http://auth.travel.com/regist.html" class="li_2">免费注册</a>
    <a th:if="${loginUser != null}" href="http://auth.travel.com/loguot.html" class="li_2">退出</a>
</nav>

<div id="container">
    <!-- 景点详情顶部信息 -->
    <div class="header-container">
        <!-- 景点名 -->
        <h1 th:text="${attraction.name}"></h1>

        <!-- 省份 -->
        <h1 th:text="${attraction.location}">省份</h1>

        <!-- 景点标签 -->
        <p style="color: #007BFF;" th:text="${attraction.tag}"></p>

        <!-- 点赞 -->
        <img id="likeImage" th:src="${isLike} ? '/image/isLike.png' : '/image/like.png'" onclick="toggleLike()">
        <p id="likeCount" th:text="${attraction.likeNum}"></p>

        <!-- 收藏 -->
        <img id="collectionImage" th:src="${isCollection} ? '/image/isCollection.png' : '/image/collection.png'"
             onclick="toggleCollection()">
        <p id="collectionCount" th:text="${attraction.collectionNum}"></p>
    </div>


    <!-- 景点图片 -->
    <img class="attraction-image" th:src="${attraction.defaultImageUrl}" alt="Attraction Image">


    <!-- 景点介绍 -->
    <section>
        <h2>景点介绍</h2>
        <p th:text="${attraction.introduction}">这是一个美丽的景点，拥有丰富的自然风光和历史文化。</p>
    </section>

    <!-- 景点攻略 -->
    <section>
        <h2>景点攻略</h2>
        <p th:text="${attraction.strategy}">游玩攻略：提前购票、注意天气、带上相机等。</p>
    </section>

    <!-- 景点评论 -->
    <div class="header-container">
        <h2 style="white-space: pre;">景点评论 </h2>
        <img src="/image/comment.png" onclick="openPopup()">写评论
    </div>

    <div class="comment" th:each="comment : ${attraction.commentList}">
        <div class="avatar">
            <img class="circleImg" th:src="${comment.header}">
        </div>
        <div class="info">
            <div class="username" th:text="${comment.username}">用户名</div>
            <div class="membership" th:text="${comment.levelName}">会员等级</div>
            <div class="rating">
                <span th:switch="${comment.score}">
                    <span th:case="1" style="color: #ffdd44">★</span>
                    <span th:case="2" style="color: #ffdd44">★★</span>
                    <span th:case="3" style="color: #ffdd44">★★★</span>
                    <span th:case="4" style="color: #ffdd44">★★★★</span>
                    <span th:case="5" style="color: #ffdd44">★★★★★</span>
                </span>
            </div>
        </div>
        <div class="content">
            <div class="text-content">
                <p th:text="${comment.content}">评论文字内容...</p>
            </div>
            <div class="image-content">
                <img class="commentImg" th:src="${comment.imageUrl}" alt="Comment Image">
            </div>
        </div>
        <div class="time" th:utext="${#dates.format(comment.addTime, 'yyyy-MM-dd HH:mm')}">评论时间</div>
    </div>
</div>


<!-- 弹窗评论内容 -->
<div id="popup" class="overlay">
    <div class="popup">
        <!-- 内容有：评论内容，图片，评论分数 -->
        <h3>编写评论</h3>
        <form>
            <label for="comment">评论内容:</label><br>
            <textarea id="comment" name="comment" rows="4" cols="50" style="width: 350px;height: 200px;"></textarea><br>

            <input type="file" id="imageInput" accept="image/*" />

            <div>
                <span class="fa fa-star" onclick="rate(1)"></span>
                <span class="fa fa-star" onclick="rate(2)"></span>
                <span class="fa fa-star" onclick="rate(3)"></span>
                <span class="fa fa-star" onclick="rate(4)"></span>
                <span class="fa fa-star" onclick="rate(5)"></span>
            </div>

            <input type="button" value="发布" onclick="submitComment()">
            <span class="close-btn" onclick="closePopup()">关闭</span>
        </form>
    </div>
</div>


<script>
    // 打开弹窗
    function openPopup() {
        document.getElementById('popup').style.display = 'flex';
    }

    // 关闭弹窗
    function closePopup() {
        document.getElementById('popup').style.display = 'none';
    }

    // 提交评论
    function submitComment() {
        // 处理提交评论的逻辑
        //1. 获取评论内容、图片文件和评分
        var commentContent = document.getElementById('comment').value;

        var commentRating = selectedRating;
        console.log("commentRating: " + commentRating);
        console.log("Type of commentRating: " + typeof commentRating);

        var attractionId = getAttractionIdFromUrl(window.location.href);
        console.log("attractionId: " + attractionId);
        console.log("Type of attractionId: " + typeof attractionId);

        if (commentRating === 0) {
            alert('请为景点评分！');
            return; // 如果评分为0，则停止提交评论
        }

        //2. 构建FormData对象，用于发送表单数据
        var formData = new FormData();
        formData.append('content', commentContent);
        formData.append('score', parseInt(commentRating));
        formData.append('attractionId', parseInt(attractionId));

        // 判断是否选择了图片文件
        var imageFile = document.getElementById('imageInput').files[0];
        if (imageFile) {
            formData.append('imageFile', imageFile);
        }

        //3. 发送AJAX请求
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://sight.travel.com/saveComment', true);

        // 处理请求完成后的回调
        xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 请求成功，刷新页面或更新评论区域
                location.reload(); // 刷新页面的简单示例
            } else {
                // 请求失败，处理错误
                alert('评论提交失败: ' + xhr.statusText);
                console.error('评论提交失败: ' + xhr.statusText);
            }
        };

        //4. 发送请求
        xhr.send(formData);

        closePopup(); // 关闭弹窗
    }


    let selectedRating = 0; // 全局变量，用于存储当前所选的评分

    function rate(num) {
        const stars = document.querySelectorAll('.fa-star');

        // 遍历所有星星
        for (let i = 0; i < stars.length; i++) {
            if (i < num) {
                stars[i].classList.add('checked'); // 添加选中样式
            } else {
                stars[i].classList.remove('checked'); // 移除未选中样式
            }
        }
        selectedRating = num; // 更新当前所选的评分
        // 这里可以添加其他处理所选评分的逻辑，例如将其发送到服务器或更新UI元素
        console.log('您评价了 ' + num + ' 星。');
    }

    // 获取url上的attractionId
    function getAttractionIdFromUrl(url) {
        var regex = /\/(\d+)\.html$/;
        var match = url.match(regex);
        if (match && match[1]) {
            return match[1];
        }
        return null;
    }

    // 初始化状态，可在服务器端判断当前用户是否已经点赞或收藏，然后设置初始状态
    let isLiked = false;
    let isCollected = false;

    // 页面加载时获取初始状态
    document.addEventListener("DOMContentLoaded", function () {
        fetchInitialStatus();
    });

    // 点赞处理
    function toggleLike() {
        isLiked = !isLiked;
        updateLikeUI();
        // 在这里添加发送点赞请求的逻辑，同时更新服务器端的点赞数
        //1. 获取景点id
        var attractionId = getAttractionIdFromUrl(window.location.href);

        location.href = "http://sight.travel.com/saveLike?attractionId=" + attractionId;
    }

    // 收藏处理
    function toggleCollection() {
        isCollected = !isCollected;
        updateCollectionUI();
        // 发送收藏请求的逻辑，同时更新服务器端的收藏数
        //1. 获取景点id
        var attractionId = getAttractionIdFromUrl(window.location.href);

        location.href = "http://sight.travel.com/saveCollection?attractionId=" + attractionId;
    }

    // 更改为已点赞状态
    function updateLikeUI() {
        const likeImage = document.getElementById("likeImage");
        const likeCount = document.getElementById("likeCount");

        if (isLiked) {
            likeImage.src = "/image/isLike.png";
        } else {
            likeImage.src = "/image/like.png";
        }
    }

    // 更改为已收藏状态
    function updateCollectionUI() {
        const collectionImage = document.getElementById("collectionImage");
        const collectionCount = document.getElementById("collectionCount");

        if (isCollected) {
            collectionImage.src = "/image/isCollection.png";
        } else {
            collectionImage.src = "/image/collection.png";
        }
    }


    function uploadToOSS() {
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0]; // 获取用户选择的文件

        // 发送 POST 请求，上传文件到 OSS
        var xhr = new XMLHttpRequest();
        xhr.withCredentials = true; // 允许跨域请求
        xhr.open('POST', 'http://thirdparty.travel.com/oss/upload', true);

        var formData = new FormData();
        formData.append('localFilePath', file); // 将文件添加到 FormData 对象
        formData.append('objectName', file.name); // 使用文件名作为 objectName

        xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 处理文件上传成功的逻辑
                console.log('文件上传成功');
            } else {
                // 处理文件上传失败的逻辑
                console.error('文件上传失败', xhr.statusText);
            }
        };
        xhr.onerror = function () {
            // 处理文件上传失败的逻辑
            console.error('文件上传失败', xhr.statusText);
        };

        // 发送请求
        xhr.send(formData);
    }

    var imageInput = document.getElementById('imageInput');
    imageInput.addEventListener('change', function() {
        reader.onload = function(event) {
            uploadToOSS();
        };
        reader.readAsDataURL(file);
    });

</script>


</body>
</html>
